/*
列表
<!--模糊查询-->
<!--下拉刷新-->
<!--上滑加载更多-->
<!--列表-->
User: shy
Date: 2024-04-02 16:00
All rights reserved by Kong Fanqun
*/
<template>
  <div class="list_main">
    <div class="btns">
      <van-button type="primary" @click="http_getlist">主要按钮</van-button>
      <van-button type="success" @click="toAndroid">调用安卓的方法</van-button>
      <van-button type="default">默认按钮</van-button>
      <van-button type="warning" @click="getList">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
      <aasd type="danger">自定义按钮</aasd>
    </div>
    <div @click="gundong">{{ test22 }}嘿嘿</div>

    <van-pull-refresh v-model="refresh" @refresh="onRefresh" :disabled="pull_disabled">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="finished_text"
          loading-text="加载中..."
          @load="onLoad"
          @scroll="scroll_cli">
        <van-cell v-for="item in list" :key="item" :title="item"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import {reactive, ref, onMounted, useAttrs, useSlots} from "vue";
import {get_data} from '@/views/a_shy/http_1.js'

const list = ref([]);
const loading = ref(false);     // 加载中
const finished = ref(false);    // 没有更多数据 最后没有数据的时候显示 会覆盖点前面的加载中
const refresh = ref(false);  // 刷新中
const pull_disabled = ref(false)// 下拉刷新开关
const finished_text = ref("")

const slots = useSlots();
const attrs = useAttrs();

const emits = defineEmits(['getChild']);
const obj = reactive({
  name: "",
  age: ""
})
//向父暴露字段
defineProps({
  test22: String,
  lost22: String
})
// 向父类暴露方法
defineExpose({
  // get_data,
})

onMounted(async () => {
  // window.addEventListener('scroll', (red)=>{
  //   console.log( red)
  // },true)
})
// 解析接口回来的数据,数组分层[]
// 绑定数据格式
// 传值直接绑定 覆盖还是追加
// 传接口调用

//调用安卓的方法
function toAndroid() {
  let a = window.android;
  a.JSToAnroid("调用哈哈哈2")
}

function http_getlist(sx) {
  //刷新
  if (sx) {
    refresh.value = true;
    finished.value = false;
    loading.value = false;
  } else {
    refresh.value = false;
    finished.value = false;
    loading.value = true;
  }
  get_data({}).then(res => {
    refresh.value = false;
    loading.value = false;
    finished.value = true;
    finished_text.value = "加载完成";
  }).catch(error => {
    refresh.value = false;
    loading.value = false;
    finished.value = true;
    finished_text.value = "加载失败";
  });
  let aa = {}
  aa.url = "http://192.168.2.250:8082/bkLables/test32"
  aa.bb = "cshi"
  let a = window.android;
  console.log(JSON.stringify(a))
  // alert(a)
  a.JSToAnroid("调用哈哈哈")
  // get_data(aa)
  // setTimeout(() => {
  //   //刷新 判断当前存在需要清空后刷新
  //   if (refresh.value) {
  //     list.value = [];
  //     refresh.value = false;
  //   }
  //
  //   for (let i = 0; i < 30; i++) {
  //     list.value.push(list.value.length + 1);
  //   }
  //
  //   loading.value = false;
  //
  //   if (list.value.length >= 40) {
  //     finished.value = true;
  //   }
  // }, 1000);
}

//列表刷新
function onRefresh() {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

//加载更多
function onLoad() {
  // loading.value = true;
  // finished.value = true;
  // setTimeout(() => {
  //   //刷新 判断当前存在需要清空后刷新
  //   if (refreshing.value) {
  //     list.value = [];
  //     refreshing.value = false;
  //   }
  //
  //   for (let i = 0; i < 30; i++) {
  //     list.value.push(list.value.length + 1);
  //   }
  //
  //   loading.value = false;
  //
  //   if (list.value.length >= 40) {
  //     finished.value = true;
  //   }
  // }, 1000);
};

function scroll_cli(event) {
  const scrollTop = event.target.scrollTop
  if (scrollTop <= 0) {
    pull_disabled.value = false
  } else {
    pull_disabled.value = true
  }
}

//向父类传值
function gundong() {
  emits("getChild", "子组件传值");
}

</script>

<style scoped>
.list_main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

:deep(.van-pull-refresh) {
  width: 100%;
  height: 100%;
  justify-content: center;
}

:deep(.van-list) {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

:deep(.van-pull-refresh__track) {
  width: 100%;
  height: auto;
}

:deep(.van-cell) {
  width: 100%;
  height: auto;
}
</style>